<template>
  <div>
    
    <ul>
      <li >
         <router-link to="/index" @click="fun()" >
         <span class="iconfont icon-shouye" style="font-size: .25rem;"></span>
         <span>首页</span>
         </router-link>
        
      </li>
      <li>
        <router-link to="/topic">
        <span class="iconfont icon-find" style="font-size: .25rem;"></span>
        <span>发现</span>
         </router-link>
        
      </li>
      <li>
        <router-link to="/beaty">
        <span class="iconfont icon-meihuadaimai0" style="font-size: .25rem;"></span>
        
        <span>美化</span>
         </router-link>
        
      </li>
      <li>
          <router-link to="/myself">
          <span class="iconfont icon-wo" style="font-size: .25rem;"></span>
        <span>我的</span>
         </router-link>
        
      </li>
    </ul>
  </div>
</template>

<script>
export default{
  computed:{
    
  }
}
</script>

<style scoped>
ul {
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 0.08rem;
  display: flex;
  justify-content: center;
 width: 100%;
 border-top: 1px solid gray;
background-color: #fff;
}
li {
  flex: 1;
  text-align: center;
}
li>a{
  color: gray;
  text-decoration: none;
  display: flex;
 flex-direction: column;
}
li>a>span:nth-child(1){
   height: .3rem;
  line-height: .3rem;
}
li>a>span{
  font-size: .1rem;
  flex: 1;
  margin-bottom: .05rem;
}
a.router-link-active{
  color: hotpink;
}
</style>